import React, { memo, useState, useEffect } from "react";

import { useSelector, useDispatch, shallowEqual } from "react-redux"
import { message } from "antd";

import setCookie from "@/utils/set-cookie.js"
import { getQrKey, getQrcode, getQrStatus, getLgStatus, getCookie, changeIsShow, changUserId } from './store/actionCreators'
import { LoginWrapper, LoginContent, LoginFooter } from './style'

import PhoneLogin from "./components/phone-login/index";
export default memo(function GHLogin() {
  let timer
  const dispatch = useDispatch()
  const [statue, setStatus] = useState({})
  const [loginMethod, setLoginMethod] = useState('qrcode')
  const state = useSelector((state) => ({
    key: state.getIn(['login', 'qrCodeKey']),
    qrcode: state.getIn(['login', 'qrcodeBase']),
    status: state.getIn(['login', 'qrcodeStatus']),
    loginStatus: state.getIn(['login', 'loginStatus']),
    cookie: state.getIn(['login', 'useCookie'])
  }), shallowEqual)

  useEffect(() => {
    dispatch(getQrKey())
  }, [dispatch])


  useEffect(() => {
    dispatch(getQrcode(state.key))
    if (state.key) {
      timer = setInterval(() => {
        dispatch(getQrStatus(state.key))
      }, 3000)
    } return (_) => {
      clearInterval(timer)
    }
  }, [dispatch, state.key])

  useEffect(() => {
    setStatus(state.status)
    if (state.status?.code === 803) {
      dispatch(getLgStatus(state.status?.cookie))
      message.success('登录成功')
      setTimeout(() => {
        dispatch(changeIsShow())
      }, 0)
      setCookie(state.status?.cookie)
    }
  }, [dispatch, state.status])

  const hanldeOtherMethod = (method) => {
    setLoginMethod(method)
    clearInterval(timer)
  }

  function isLogin() {
    if (statue?.code === 801) {
      return (
        <div>过期了</div>
      )
    } else if (statue?.code === 802) {
      return (
        <div>请确认</div>
      )
    } else if (statue?.code === 803) {
      return (
        <div>登录成功</div>
      )
    }
  }



  return (
    <LoginWrapper>
      <div className="center">
        <LoginContent className="login_content">
          <div className="heaer">
            <p>登录</p>
            <p className="cancal" onClick={_ => dispatch(changeIsShow())}>×</p>
          </div>
          {
            loginMethod === 'qrcode' ?
              <div className="content">
                <img src={require("@/assets/img/login_qrcode.png")} alt=""></img>
                <div className="content-right">
                  <h2>扫码登录</h2>
                  {
                    state.qrcode?.qrimg ?
                      <img className="qrcode" src={state.qrcode.qrimg} alt=""></img>
                      : <img className="qrcode" src="" alt=""></img>
                  }
                  <p>使用&nbsp;<a href="/download" target="_blank">网易云音乐APP</a>&nbsp;扫码登录</p>
                  {
                    isLogin()
                  }
                </div>
              </div>
              : <PhoneLogin></PhoneLogin>
          }
          {
            loginMethod === 'qrcode' &&
            <LoginFooter onClick={_ => hanldeOtherMethod('phone')}>
              选择其他登录方式
            </LoginFooter>
          }
        </LoginContent>
      </div>
    </LoginWrapper>
  )
})